<template>
  <div class="tab">
    <div class="top">
      <div class="box">
        <div class="item1">
          <div :class="whichCss(nameMapping.QUESTION)" @click="toPage()">问题</div>
          <div :class="whichCss(nameMapping.ANSWER)" @click="toPage()">回答</div>
          <div :class="whichCss(nameMapping.ESSAY)" @click="toPage()">文章</div>
        </div>
        <div class="itemInput">
          <el-input
              v-model="query"
              size="small"
              placeholder="请输入内容"
              :prefix-icon="Search"
          >
            <template #prefix>
              <el-icon class="el-input__icon"><search /></el-icon>
            </template>
          </el-input>
        </div>
        <div class="itemBtn">
          <el-button type="primary" size="small" @click="changeQuery">
            搜索
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {defineComponent} from 'vue'
import {ElMessage} from "element-plus";
// import { Search } from '@element-plus/icons-vue'
import * as nameMapping from "@/settings/nameMapping"

export default defineComponent({
  name: "Top",
  data() {
    return {
      query: "",
      nameMapping: nameMapping
    }
  },
  watch: {
    // query(newValue, oldValue) {
    //   oldValue
    //   // this.$store.mutations.updateQuestionQuery(newValue);
    //   this.$store.commit('updateQuestionQuery', newValue);
    // }
  },
  methods: {
    changeQuery() {
      this.$store.commit('updateQuestionQuery', this.query);
      ElMessage({
        showClose: true,
        message: nameMapping.LOADING,
        type: 'message',
        center: true,
        duration: 1000,
      });
    },
    whichCss(itemType) {
      console.log(this.queryType, itemType)
      let css = "tabs";
      if (this.queryType === itemType) {
        css = "tabs-now";
      }
      else {
        css = "tabs";
      }
      return css;
    }
  },
  computed: {
    queryType() {
      return this.$store.state.queryType;
    },

  }
})
</script>

<style scoped>
.top{
  border-bottom: #e3e3e3 2px solid;
  padding-bottom: 10px;
  padding-top: 10px;
}
.box{
  display: flex;
}
.item1{
  flex: 2;
  display: flex;
  margin-left: 20%;
}
.tabs{
  margin-left: 30px;
}
.tabs:hover{
  color: #42b983;
  cursor: pointer;
}
.tabs-now {
  /*color: #54b4f8;*/
  cursor: pointer;
  border-bottom: 2px solid #54b4f8;
  font-weight: bold;
}
.itemInput{
  flex: 1;
}
.itemBtn{
  flex:0.2;
}
</style>
